ひとりNavigation API Advent Calendar 14日目

https://gyazo.com/0ef69b0be101249a730edf0fc4497afc

ひとりNavigation API Advent Calendar 06日目で作ったHistory APIのクライアントサイドルーティングの仕組みをNavigation APIで作り直してみる

主な変更点

History API版: popstateイベント + クリックイベントの手動処理

code:js

window.addEventListener("popstate", this.popStateHandler);

document.addEventListener("click", this.clickHandler);

History API版ではsetupLinkInterception()でクリックイベントを手動処理していた

Navigation API版: navigateイベント一つで全てのナビゲーションを処理

code:js

navigation.addEventListener("navigate", this.navigateHandler);

Navigation API版では自動的にnavigateイベントが発火するため不要

2. navigateイベントの活用

code:javascript

navigation.addEventListener("navigate", (event) => {

event.intercept({

handler: async () => {

this.handleRoute(url.pathname);

});

すべての種類のナビゲーション（リンククリック、ブラウザの戻る/進む、プログラム的なナビゲーション）を一箇所で処理

History APIでは不可能だった統一的な制御が可能

intercept()メソッドを活用

hashChangeやdownloadRequestも簡単にフィルタリング可能

code:js

if (!event.canIntercept || event.hashChange || event.downloadRequest) {

return;

}

pushStateでの履歴管理を廃止しnavigateでの切り替えを実行

code:javascript

// History API版

window.history.pushState({}, "", path);

this.handleRoute(path);

code:js

// Navigation API版

navigation.navigate(path);